<template>
	<div>
		<Form label-position="top">
	        <FormItem label="间距设置">
	        	<div class="ui-slider-group">
	        		<div class="label">顶部外边距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.margin"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">上下间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingy"></Slider>
	        		</div>
	        	</div>
	        	<div class="ui-slider-group">
	        		<div class="label">左右间距</div>
	        		<div class="box">
	        			<Slider :max="50" v-model="value.paddingx"></Slider>
	        		</div>
	        	</div>
	        </FormItem>
	        <FormItem label="背景颜色">
	            <ColorPicker v-model="value.bgcolor" placement="bottom-start"></ColorPicker>
	            <span style="margin-left: 10px; color: #999;">请选择按钮组区域背景颜色</span>
	        </FormItem>
	        <FormItem label="每页单行显示数量">
	            <RadioGroup v-model="value.showNumber">
			        <Radio :label="3">3个</Radio>
			        <Radio :label="4">4个</Radio>
			        <Radio :label="5">5个</Radio>
			    </RadioGroup>
	        </FormItem>
	        <FormItem label="显示方式">
	            <RadioGroup v-model="value.showType">
			        <Radio :label="0">单页显示</Radio>
			        <Radio :label="1">多页滚动显示</Radio>
			    </RadioGroup>
	        </FormItem>
	        <FormItem label="按钮总数量">
	            <Input v-model="value.number">
	            	<span slot="append"> 个 </span>
	            </Input>
	        </FormItem>
	    </Form>
	    <PictureUploads :add="false" v-model="value.lists"></PictureUploads>
	</div>
</template>

<script>
import PictureUploads from '../../components/PictureUploads.vue';
export default {
	name: 'btnsConfig',
	components: {
		PictureUploads
	},
	props: {
		value: {
			type: Object,
			default: function() {
				return {};
			}
		}
	},
	watch: {
		'value.number': {
			deep: true,
			handler() {
				let arr = this.value.lists;
				let num = this.value.number, len = this.value.lists.length;
				if(len > num) {
					arr = arr.filter((item, index) => {
						return index < num;
					})
				}else if(len < num){
					for(let i = 0; i < num - len; i++) {
						arr.push({title: '', image: '', link: ''})
					}
				}
				this.value.lists = arr;
			}
		}
	}
}
</script>

<style>
</style>